<script setup lang="ts">
import { isLogined, userInfo } from '@/common/shareState';
import { computed } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute()

const isShopActiving = computed(() => route.fullPath === '/shop' || route.fullPath.startsWith('/shop/'))
const domLinkShopCls = computed(() => isShopActiving.value ? 'active' : '')
</script>

<!-- 
1.css加上moudle：<style lang="less" module>
2.除了顶级class，其余的都要包裹在:global{}中
3.在html中使用：<div :class="$style.root">
4.好处：如果不写moudle，虽然使用scoped也会让样式隔离，但是vue在打包时会将这些class名改为哈希值，要是样式很多，那么class名就会越长，会使用过多的内存及时长；
使用了moudle之后，那么打包时，不会哈希class，还是原来的class名字，可能顶级class名会被哈希
-->

<template>
	<div :class="$style.root">
		<div class="bar">
			<img src="/home/logo.png" class="logo" />
			<RouterLink class="btn home" to="/home">首页</RouterLink>

			<RouterLink class="btn" to="/shop" :class="domLinkShopCls"
				style="font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;">
				选购模型
			</RouterLink>
			<template v-if="isLogined">
				<div class="user-name">{{ userInfo.name }}</div>
				<RouterLink class="btn order" to="/order/list">模型订单</RouterLink>
				<div class="btn logout" @click="() => userInfo.name = ''">退出</div>
			</template>
			<template v-else>
				<RouterLink to="/login" class="btn login">登录</RouterLink>
			</template>
		</div>
		<div style="flex: 1;overflow-y: auto;">
			<RouterView />
		</div>
	</div>

</template>
<style lang="less" module>
.root {
	height: 100%;
	background: #F4F5F9;
	display: flex;
	flex-direction: column;

	:global {
		.bar {
			height: 90px;
			flex-basis: 90px;
			display: flex;
			align-items: center;
			background: linear-gradient(228deg, #D9D0FD 0%, #FFD6EB 100%);
			box-shadow: 0px 0px 10px 3px rgba(214, 214, 214, 0.5);
			font-weight: bold;
			font-size: 16px;
			color: #252525;
			padding-left: 301px;

			.logo {
				width: 182px;
			}

			.btn {
				padding: 0 18px;
				font-weight: bold;
				font-size: 16px;
				color: #252525;
				text-decoration: none;
				height: 100%;
				display: flex;
				align-items: center;

				&.active {
					background-color: white;
				}
			}

			.home {
				margin-right: 16px;
				margin-left: 85px;
				font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
			}

			.user-name {
				font-weight: 400;
				font-size: 16px;
				color: #252525;
				opacity: 0.45;
				margin-left: 657px;
			}

			.login {
				margin-left: 790px;
			}

			.order {
				padding: 0 20px;
			}

			.logout {
				font-weight: 600;
				font-size: 16px;
				color: #FE6A7B;
				padding: 0;
			}
		}
	}
}
</style>